<template>
    <div class="index-header">
        <div class="index-header-left">
            <div>
                <!-- <img src="@/assets/images/company-logo-white.png" class="index-header-logo"
                    v-if="local.showSetting.logo"> -->
                <img :src="local.systemInfo?.blackLogo" class="index-header-logo" v-if="local.showSetting.logo">
            </div>
            <div class="index-header-operate">
                <a-popover :popup-translate="[103, 8]" trigger="click">
                    <div type="text" class="operate-botton">
                        <span>
                            {{ $t('components.header.60zdt9y6tcc0') }}
                        </span>
                    </div>
                    <!-- <template #content>
                        <div class="operate-demo">
                            <a-checkbox v-model="(local.showSetting as any)[item.field]" v-for="item in showList"
                                :key="item.field">{{ item.name }}</a-checkbox>
                        </div>
                    </template> -->
                    <template #content>
                        <div class="operate-demo">
                            <div class="operate-demo-switch-box">
                                <a-checkbox v-for="item in showList.filter(item => item.type == 'switch')"
                                    v-model="(local.showSetting as any)[item.field]" :key="item.field">
                                    {{ item.name }}
                                </a-checkbox>
                            </div>
                            <div class="operate-demo-switch-chexkbox">
                                <a-space direction="vertical"
                                    v-for="item in showList.filter(item => item.type == 'checkbox')">
                                    <a-checkbox :key="item.field"
                                        :model-value="!!((local.showSetting as any)[item.field]?.length && ((local.showSetting as any)[item.field]?.length == item.options?.length))"
                                        :indeterminate="!!((local.showSetting as any)[item.field]?.length && ((local.showSetting as any)[item.field]?.length != item.options?.length))"
                                        @change="handleChangeAll($event as any, item)">
                                        {{ item.name }}
                                    </a-checkbox>
                                    <a-checkbox-group v-model="(local.showSetting as any)[item.field]">
                                        <a-checkbox v-for="subItem in item.options" :key="subItem.field"
                                            class="check-item" :value="subItem.field">
                                            <img alt="" :src="subItem.img" v-if="subItem.img"
                                                class="operate-demo-img" />
                                            {{ subItem.name }}
                                        </a-checkbox>
                                    </a-checkbox-group>
                                </a-space>
                            </div>
                        </div>
                    </template>
                </a-popover>
            </div>
        </div>
        <div class="index-header-middle">
            <span class="index-header-title">{{ local.systemInfo?.name }}</span>
        </div>
        <div class="index-header-right">
            <div class="index-header-operate">
                <div type="text" class="operate-botton" @click="toData">
                    <span>
                        {{ $t('components.header.60zdt9y6wts0') }}
                    </span>
                </div>
            </div>
            <div class="index-header-weather">
                <div class="weather">
                    <img alt="" :src="weatherIconImg" /><span>{{ temp.weather?.weather }}</span>
                </div>
                <div class="temperature">
                    <div class="temperature-difference">{{ temp.weather?.temperature }}</div>
                    <div class="degree-centigrade" v-if="temp.weather?.temperature">℃</div>
                </div>
            </div>
            <div class="index-header-time">
                <div class="header-time-data">
                    <p class="time">{{ dayjs(now).format('YYYY')
                        }}<span>{{ $t('components.header.60zdt9y6x3w0') }}</span>{{
                            dayjs(now).format('MM')
                        }}<span>{{ $t('components.header.60zdt9y6xj00') }}</span>{{ dayjs(now).format('DD')
                        }}<span>{{ $t('components.header.60zdt9y6xog0') }}</span></p>
                </div>
                <div class="header-time-week">
                    <p class="week"><span>{{ $t('components.header.60zdt9y6xww0') }}</span>{{ week[dayjs(now).day()] }}
                    </p>
                    <p class="data">{{ dayjs(now).format('HH:mm:ss') }}</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang='ts' setup>
//时间特性
import { ref, onBeforeUnmount, computed } from 'vue';
import dayjs from 'dayjs'
import sun from '@/assets/images/sun.png';
import cloudy from '@/assets/images/cloudy.png';
import wind from '@/assets/images/wind.png';
import rain from '@/assets/images/rain.png';
import snow from '@/assets/images/snow.png';
import planeImg from '@/assets/images/plane.png';
import boatImg from '@/assets/images/boat.png';
import spectImg from '@/assets/images/spect.png';
import fiveGAImg from '@/assets/images/fiveGA.png';
const local = useLocal()
const temp = useTemp()
let timer: any
const week = ref([t('components.header.60zdt9y6xog0'), t('components.header.60zdt9y6y240'), t('components.header.60zdt9y6y6s0'), t('components.header.60zdt9y6ybc0'), t('components.header.60zdt9y6yew0'), t('components.header.60zdt9y6yi00'), t('components.header.60zdt9y6ym40')])
const showList = computed(() => [
    {
        type: 'checkbox',
        field: 'exploration',
        name: t('components.header.60zdt9y6yp03'),
        options: [
            {
                field: 'plane',
                name: t('components.header.60zdt9y6yp01'),
                img: planeImg
            },
            {
                field: 'boat',
                name: t('components.header.60zdt9y6yrw1'),
                img: boatImg
            },
            {
                field: 'spect',
                name: t('components.header.60zdt9y6yus0'),
                img: local.reserveType === 0 ? spectImg : fiveGAImg
            }
        ]
    },
    {
        type: 'switch',
        field: 'device',
        name: t('components.header.60zdt9y6yp00')
    },
    {
        type: 'switch',
        field: 'operator',
        name: t('components.header.60zdt9y6yrw0')
    },
    {
        type: 'switch',
        field: 'track',
        name: t('components.header.60zdt9y6yz00')
    },
    {
        type: 'switch',
        field: 'range',
        name: t('components.header.60zdt9y6z1s0')
    },
    {
        type: 'switch',
        field: 'scan',
        name: t('components.header.60zdt9y6z4k0')
    },
    {
        type: 'switch',
        field: 'logo',
        name: t('components.header.60zdt9y6z4k2')
    },
    {
        type: 'switch',
        field: 'controlArea',
        name: t('components.header.60zdt9y6z4k1')
    },
    {
        type: 'switch',
        field: 'correlation',
        name: t('components.header.60zdt9y6z4k3')
    }
]);

const now = ref(Date.now())
let weatherIconImg = '';
const weatherIcon = [
    sun,
    cloudy,
    wind,
    rain,
    snow,
    ''
]
let weatherArr = [['晴', '热']
    , ['少云', '晴间多云', '多云', '阴', '霾', '中度霾', '重度霾', '严重霾'], ['有风', '平静', '微风', '和风', '清风', '强风/劲风', '疾风', '大风', '烈风', '风暴', '狂爆风', '飓风', '热带风暴', '浮尘', '扬沙', '沙尘暴', '强沙尘暴', '龙卷风', '雾', '浓雾', '强浓雾', '轻雾', '大雾', '特强浓雾']
    , ['阵雨', '雷阵雨', '雷阵雨并伴有冰雹', '小雨', '中雨', '大雨', '暴雨', '大暴雨', '特大暴雨', '强阵雨', '强雷阵雨', '极端降雨', '毛毛雨/细雨', '雨', '小雨-中雨', '中雨-大雨', '大雨-暴雨', '暴雨-大暴雨', '大暴雨-特大暴雨']
    , ['雨雪天气', '雨夹雪', '阵雨夹雪', '冻雨', '雪', '阵雪', '小雪', '中雪', '大雪', '暴雪', '小雪-中雪', '中雪-大雪', '大雪-暴雪', '冷']
    , '未知'
] as any;
const weatherIconMap = () => {
    if (weatherArr[0].includes(temp.weather.weather)) {
        weatherIconImg = weatherIcon[0]
    } else if (weatherArr[1].includes(temp.weather.weather)) {
        weatherIconImg = weatherIcon[1]
    } else if (weatherArr[2].includes(temp.weather.weather)) {
        weatherIconImg = weatherIcon[2]
    } else if (weatherArr[3].includes(temp.weather.weather)) {
        weatherIconImg = weatherIcon[3]
    } else if (weatherArr[4].includes(temp.weather.weather)) {
        weatherIconImg = weatherIcon[4]
    } else {
        weatherIconImg = weatherIcon[5]
    }
}
// const form = reactive({
//     active: 0,
//     data: {
//         page: 1,
//         pageSize: 0,
//         sort:'',
//         uid: local.usermsg.id == 3 ? 0 : local.usermsg.id == 3 ? 0 : local.usermsg.id
//     },
//     loading: false,
//     detail: {},
//     count: 0
// } as any)
useWatch(() => temp.weather, (_val: any) => {
    weatherIconMap()
})
// 数据
onBeforeMount(() => {
    timer = setInterval(() => {
        now.value = Date.now()
    }, 1000)
})
onBeforeUnmount(() => {
    clearInterval(timer)
    timer = null
})
onBeforeMount(() => {
    local.getSystem()
    if (!temp.weather) return;
})
// 地图显示反选与全选
const handleChangeAll = (e: boolean, item: any) => {
    console.log(e, item)
    if (e) {
        (local.showSetting as any)[item.field] = item.options.map((i: any) => i.field)
    } else {
        (local.showSetting as any)[item.field] = []
    }
}
//进入后台系统
const router = useRouter()
const toData = () => {
    router.push({
        name: local.reserveType === 0 ? 'remoteIdSpectRecord' : 'fiveGASpectRecord'
    })
}
</script>
<style scoped lang="less">
.index-header {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: url('@/assets/images/head_wrjzcglpt_@2x.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 0 30px;

    .index-header-left {
        display: flex;
        align-items: top;
        justify-content: space-between;
        width: 450px;
        height: 100%;

        .index-header-logo {
            width: 165px;
            height: 42px;
            margin-top: 4px;

            img {
                width: 165px;
                height: 42px;
            }

            &.show {
                display: none;
            }
        }

        .index-header-operate {
            .operate-botton {
                width: 180px;
                height: 40px;
                font-family: YouSheBiaoTiHei;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 28px;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 24px;
                color: rgba(255, 255, 255, 1);
                background-image: url('@/assets/images/left-button.png');
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;
                font-family: YouSheBiaoTiHei;
                opacity: 1;
                position: relative;
                margin-top: 5px;
                cursor: pointer;
                font-size: 17px !important;
                letter-spacing: 0.48px !important;
                line-height: 24px !important;
                vertical-align: middle !important;
                transition: background 0.2s;

                span {
                    background-image: -webkit-linear-gradient(bottom, rgb(153 218 252), #ffffff) !important;
                    -webkit-background-clip: text !important;
                    -webkit-text-fill-color: transparent !important;
                }

            }

            .operate-botton:hover {
                background-image: url('@/assets/images/left-button-active.png');
            }

            :deep(.arco-checkbox-label) {
                color: #fff !important;
            }
        }
    }

    .index-header-middle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 600px;
        height: 100%;

        .index-header-title {
            color: #fff;
            font-size: 40px;
            font-weight: 400;
            font-family: YouSheBiaoTiHei;
            letter-spacing: 5px;
        }
    }

    .index-header-right {
        width: 450px;
        height: 100%;
        display: flex;
        align-items: top;
        justify-content: space-between;

        .index-header-operate {
            .operate-botton {
                width: 180px;
                height: 40px;
                font-family: YouSheBiaoTiHei;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 28px;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 24px;
                color: rgba(255, 255, 255, 1);
                background-image: url('@/assets/images/right-button.png');
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;
                font-family: YouSheBiaoTiHei;
                opacity: 1;
                position: relative;
                margin-top: 5px;
                cursor: pointer;
                font-size: 17px !important;
                letter-spacing: 0.48px !important;
                line-height: 24px !important;
                vertical-align: middle !important;
                transition: background 0.2s;

                >span {
                    background-image: -webkit-linear-gradient(bottom, rgb(153 218 252), #ffffff) !important;
                    -webkit-background-clip: text !important;
                    -webkit-text-fill-color: transparent !important;
                }

            }

            .operate-botton:hover {
                background-image: url('@/assets/images/right-button-active.png');
            }
        }

        .index-header-weather {
            width: 80px;
            text-align: right;
            margin-top: 3px;
            color: #fff;

            .weather {
                display: flex;
                height: 24px;
                align-items: center;
                justify-content: right;

                img {
                    margin-right: 4px;
                    width: 16px;
                    height: 16px;
                }
            }

            .temperature {
                display: flex;
                justify-content: right;

                .temperature-difference {
                    font-size: 16px;
                    font-weight: 600;
                    color: rgba(119, 157, 255, 1);
                }
            }
        }

        .index-header-time {
            width: 147px;
            font-size: 17px;
            font-family: YouSheBiaoTiHei;
            font-weight: 400;
            color: rgba(119, 157, 255, 1);

            .header-time-data {
                .time {
                    min-width: 50px;
                    color: rgba(119, 157, 255, 1);
                    margin-top: 5px;

                    span {
                        color: #fff;
                    }
                }
            }

            .header-time-week {
                display: flex;
                justify-content: right;

                .week {
                    margin-right: 5px;

                    span {
                        color: #fff;
                    }
                }
            }
        }
    }
}

:deep(.arco-checkbox-icon) {
    border: 2px solid rgba(36, 189, 255, 1);
}

:deep(.arco-checkbox-checked) {
    .arco-checkbox-icon {
        background-color: rgba(36, 189, 255, 1);
    }
}

:deep(.arco-popover-popup-content) {
    padding: 0 !important;
    background-color: unset !important;
}

.operate-demo {
    padding: 15px;
    display: flex;

    .arco-checkbox {
        width: 180px;
        padding: 5px;
        display: flex;
        align-items: center;
    }

    .operate-demo-switch-box {
        // display: flex;
        // flex-direction: column;
        width: 50%;
    }

    .operate-demo-switch-chexkbox {
        display: flex;
        flex-direction: column;
        width: 50%;

        .operate-demo-img {
            width: 18px;
            height: 18px;
        }

        .check-item {
            margin-left: 20px;
        }

    }



    :deep(.arco-checkbox-label) {
        color: #fff;
    }
}
</style>